<template>
  <div class="article-detail">
    <h2>{{ articleData.title }}</h2>
    <div class="header">
      <span>
        作者：
        {{ articleData.author }}
        &nbsp; &nbsp; &nbsp; &nbsp; 时间：{{
          $filter.relativeTime(articleData.publicDate)
        }}
      </span>
      <el-button type="text">编辑</el-button>
    </div>
    <div class="content" v-html="articleData.content"></div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { articleDetail } from '@/api/article'
import { useRoute } from 'vue-router'
const articleData = ref({})
const route = useRoute()
const getArticleDetail = async (id) => {
  articleData.value = await articleDetail(id)
}
getArticleDetail(route.params.id)
</script>

<style lang="scss" scoped>
.article-detail {
  h2 {
    text-align: center;
  }
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ccc;
    font-size: 14px;
    color: #666;
    ::v-deep button {
      color: #3482d6;
    }
  }
  .content {
    margin-top: 20px;
    color: #333;
  }
}
</style>
